JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件 |
您所在的位置：网站首页 › js倒计时60秒 才可以关闭页面吗 › JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件 |
|
效果如下图：点击按钮出现60秒倒计时，60s内按钮不可用，倒计时到了时间方可再次点击获取。 另外还有一个知识点，只有input 及button这样的表单元素有disbale属性，如何设置是否可用属性的方法一般用$("#id").attr('disbaled','true')及$("#id").prop('disbaled','false')，对span img这样的没有disbale的属性，这种方法就不起作用了，此时可用$("#id").setAttribute('onclick',function())或$("#id").removeAttribute("onclick")方法来设置事件是否可用。 以下是所有代码，复制即可使用： 1 DOCTYPE html> 2 3 4 验证码倒计时 5 6 7 .validate-div input{ 8 width:130px; 9 float:left; 10 line-height:30px; 11 } 12 .validation{ 13 float:left; 14 width: 85px; 15 background-color: #2eaef1; 16 border-radius: 5px; 17 margin-left: 20px; 18 text-align: center; 19 margin-top: 3px; 20 } 21 .validation span{ 22 color: #fff; 23 line-height:30px; 24 font-size: 14px; 25 } 26 27 28 29 30 31 32 33 获取验证码 34 35 36 37 38 39 40 //发送验证码函数 41 function sendsms(e){ 42 /*发送验证码功能*/ 43 countdown(e); //若发送验证码成功，则调用倒计时函数 44 } 45 //倒计时函数 46 var time = 10; 47 function countdown(e){ 48 if (time == 0) { 49 //e.setAttribute('disabled',false); 对没有disbaled属性的span标签，此方法无效 50 e.setAttribute("onclick","sendsms(this)"); 51 $("#validate_span").html("获取验证码"); 52 time = 10; 53 }else{ 54 //e.attr('disabled',true); 对没有disbaled属性的span标签，此方法也无效 55 //e.setAttribute("onclick", ''); 这样写也可以 56 e.removeAttribute("onclick"); 57 $("#validate_span").html("重新发送(" + time + ")"); 58 time--; 59 setTimeout(function() { 60 countdown(e) 61 },1000) 62 } 63 } 64 65 66
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |